<template>
  <div>
    <div class="mark"></div>
    <form>
      <label>
        姓名：
        <input type="text" style="width:300px;" v-model="obj.name" />
      </label>
      <br />
      <div style="margin-top:10px;">
        性别：
        <label>
          <input type="radio" v-model="obj.gender" value="男" name="gender" />男
        </label>
        <label>
          <input type="radio" v-model="obj.gender" value="女" name="gender" />女
        </label>
      </div>
      <div style="margin-top:10px;">
        爱好：
        <label>
          <input type="checkbox" v-model="obj.hobbies" value="打篮球" />打篮球
        </label>
        <label>
          <input type="checkbox" v-model="obj.hobbies" value="踢足球" />踢足球
        </label>
        <label>
          <input type="checkbox" v-model="obj.hobbies" value="游泳" />游泳
        </label>
        <label>
          <input type="checkbox" v-model="obj.hobbies" value="跑步" />跑步
        </label>
      </div>
      <label>
        城市：
        <select style="margin-top:10px;font-size:17px;" v-model="obj.city">
          <option disabled value="0">请选择</option>
          <option value="1">北京</option>
          <option value="2">天津</option>
          <option value="3">上海</option>
          <option value="4">云南</option>
          <option value="5">山西</option>
          <option value="6">山东</option>
        </select>
      </label>
      <br />
      <label>
        <input v-model="isAlowed" :value="isAlowed" type="checkbox" />已同意
      </label>
      <label class="btn">
        <button type="button" @click="yesBtn">确定</button>
        <button type="button" @click="cansle">取消</button>
      </label>
    </form>
  </div>
</template>

<script>
export default {
  props: ["xgMsg"],
  data() {
    return {
      obj: {
        hobbies: [],
        city: "0"
      },
      isAlowed: "",
      closeForm: false,
      isXg: true
    };
  },
  mounted() {
    if (this.xgMsg.length != 0) {
      this.xgMsg[0].hobbies = this.xgMsg[0].hobbies.split("、");
      if (this.xgMsg[0].city == "北京") {
        this.xgMsg[0].city = "1";
      } else if (this.xgMsg[0].city == "天津") {
        this.xgMsg[0].city = "2";
      } else if (this.xgMsg[0].city == "上海") {
        this.xgMsg[0].city = "3";
      } else if (this.xgMsg[0].city == "云南") {
        this.xgMsg[0].city = "4";
      } else if (this.xgMsg[0].city == "山西") {
        this.xgMsg[0].city = "5";
      } else if (this.xgMsg[0].city == "山东") {
        this.xgMsg[0].city = "6";
      }
      this.obj = this.xgMsg[0];
    }
  },
  methods: {
    yesBtn() {
      if (this.isAlowed) {
        let newObj = this.obj,
          closeform = this.closeForm,
          isXg = this.isXg;
        if (this.xgMsg.length != 0) {
          this.$emit("newData", [newObj, closeform, isXg]);
        } else {
          this.$emit("newData", [newObj, closeform]);
        }
        this.obj = {
          hobbies: [],
          city: "0"
        };
      } else {
        alert("如果确认提交请勾选同意");
        return;
      }
    },
    cansle() {
      let newObj = this.obj,
        closeform = this.closeForm,
        isXg = this.isXg;
      this.$emit("newData", [newObj, closeform, isXg]);
      this.obj = {
        hobbies: [],
        city: "0"
      };
    }
  }
};
</script>

<style scoped>
form {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  margin-top: -100px;
  padding: 30px;
  font-size: 20px;
}

.mark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  
}

.btn {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.btn button:nth-child(1) {
  width: 50px;
  height: 30px;
  background-color: blue;
  border: none;
  color: #ffffff;
}
.btn button:nth-child(2) {
  width: 50px;
  height: 30px;
  background-color: red;
  border: none;
  color: #ffffff;
}
</style>